
Step 1 : Create Database Table.
CREATE TABLE tblProduct
(
ProductId INT PRIMARY KEY IDENTITY(1,1),
ProductName NVARCHAR(150) NOT NUll,
Price MONEY NOT NUll,
PicUrl NVARCHAR(MAX) NULL
)
Step 2 : Connect Your Database Using Entity Framework (As Like Above Video).
Step 3 : Add New Controller And New View
Step 4 : Write Below Code In Your View
@model IEnumerable<WorkWithImage.Models.Product>
@{
ViewBag.Title = "Add New Product";
}
@* ########### Add New Product Form Design ############## *@
<div class="container">
<h2 class="text-center">Add New Product</h2>
<div class="row">
<div class="col-md-6">
<form id="AddProduct" method="post" enctype="multipart/form-data" onsubmit="return AjaxPost(this)">
<label>Title</label><br />
<input type="text" id="ProductName" name="ProductName" class="form-control" /><br />
<label>Price</label><br />
<input type="number" id="Price" name="Price" class="form-control" /><br />
<label>Image</label><br />
<input type="file" id="UploadImage" name="UploadImage" class="form-control" /><br />
<button class="btn btn-danger">Add</button>
</form>
</div>
</div>
</div><br /><br /><br /><br />
@* ########### Display All Product ############## *@
<div class="container">
<h2>Product List</h2>
@foreach (var item in Model)
{
double price = Convert.ToInt32(@item.Price);
<div class="col-md-3" style="margin-bottom:25px">
<div class="thumbnail">
<div class="img-responsive" style="margin-bottom:20px">
<img src="~/AppFile/Images/@item.PicUrl" height="350" width="240" />
</div>
<div class="caption" style="border-top:3px solid #808080">
<h4><a href="#">@item.ProductName</a></h4>
<h3>@price.ToString("F2")$</h3>
</div>
</div>
</div>
}
</div>
@* ###########
Pass Add New Product Form Data From View to Controller
For Save It In Database
############## *@
<script>
function AjaxPost(formData) {
var ajaxConfig = {
type: "POST",
url: "/Product/SaveData",
data: new FormData(formData),
success: function (result) {
alert(result);
window.location.href = "/Product/AddNewProduct";
}
}
if ($(formData).attr('enctype') == "multipart/form-data") {
ajaxConfig["contentType"] = false;
ajaxConfig["processData"] = false;
}
$.ajax(ajaxConfig);
return false;
}
</script>
Step 5 : Edit Product Class (As Like Above Video)
public partial class Product
{
public int ProductID { get; set; }
public string ProductName { get; set; }
public Nullable<decimal> Price { get; set; }
public string PicUrl { get; set; }
public HttpPostedFileBase UploadImage { get; set; }
}
Step 6 : Write Down The Below Code In Your Controller
public class ProductController : Controller
{
OnlineShopEntities db = new OnlineShopEntities();
public ActionResult AddNewProduct()
{
return View(db.Products.ToList());
}
[HttpPost]
public ActionResult SaveData(Product item)
{
if (item.ProductName != null && item.UploadImage != null)
{
string fileName = Path.GetFileNameWithoutExtension(item.UploadImage.FileName);
string extension = Path.GetExtension(item.UploadImage.FileName);
fileName = fileName + DateTime.Now.ToString("yymmssff") + extension;
item.PicUrl = fileName;
item.UploadImage.SaveAs(Path.Combine(Server.MapPath("~/AppFile/Images"),fileName));
db.Products.Add(item);
db.SaveChanges();
}
var result = "Successfully Added";
return Json(result, JsonRequestBehavior.AllowGet);
}
}
Run This Project